/**
 * 工厂页制程组别纯粹达成率及排名表格组件
 */
<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import http from '@/axios/http'

const route = useRoute()
const factory = ref(route.query.factory)

const date = ref(new Date())
const operation = ref("1")

const option = ref([
  {
    label: "加工",
    value: "1"
  },
  {
    label: "裁断",
    value: "2"
  },
  {
    label: "鞋面",
    value: "4"
  },
  {
    label: "半成品",
    value: "5"
  },
  {
    label: "成型",
    value: "6"
  }
])

const tableData = ref([])
const isLoading = ref(false)

watch([date, operation], () => {
  search()
})

async function search() {
  isLoading.value = true

  await http.post("/factory/getRanking", {
    factory: factory.value,
    thisTime: date.value.getFullYear() + "-" + (date.value.getMonth() < 9 ? ("0" + (date.value.getMonth() + 1)) : (date.value.getMonth() + 1)),
    lastTime: (date.value.getFullYear() - 1) + "-" + (date.value.getMonth() < 9 ? ("0" + (date.value.getMonth() + 1)) : (date.value.getMonth() + 1)),
    operation: operation.value
  }).then(res => {
    tableData.value = res.data
    if (tableData.value.length === 100) {
      // eslint-disable-next-line no-undef
      ElMessage({
        message: '表格中最多只能显示 100 条数据！',
        type: 'warning',
        duration: 5000
      })
    }
  }).catch(err => {
    console.log(err)
  })

  isLoading.value = false
}

onMounted(() => {
  search()
})
</script>

<template>
  <div id="factory-ranking-table">
    <div class="ranking-table-top">
      <div class="ranking-table-top-item">
        <span>日期：</span>

        <el-date-picker
          v-model="date"
          type="month"
          :teleported="false"
          :clearable="false"
          style="width: 100px;"
        ></el-date-picker>
      </div>

      <div class="ranking-table-top-item">
        <span>制程：</span>

        <el-select
          v-model="operation"
          :teleported="false"
          style="width: 100px;"
        >
          <el-option
            v-for="item in option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>

    <div class="ranking-table-bottom">
      <el-table
        :data="tableData"
        v-loading="isLoading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        empty-text="暂无数据"
        max-height="56vh"
        border
      >
        <el-table-column label="序号" width="70" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.rno !== null ? scope.row.rno : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="组别" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.dept_desc !== null ? scope.row.dept_desc : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="负责人" width="80" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.m_name !== null ? scope.row.m_name : '-' }}
          </template>
        </el-table-column>

        <el-table-column :label="date.getFullYear().toString().substring(2) + '年' + (date.getMonth() < 9 ? ('0' + (date.getMonth() + 1)) : date.getMonth() + 1) + '月纯粹'" width="80" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.rate1 !== null ? scope.row.rate1 + '%' : '-' }}
          </template>
        </el-table-column>

        <el-table-column :label="(date.getFullYear() - 1).toString().substring(2) + '年' + (date.getMonth() < 9 ? ('0' + (date.getMonth() + 1)) : date.getMonth() + 1) + '月纯粹'" width="80" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.rate2 !== null ? scope.row.rate2 + '%' : '-' }}
          </template>
        </el-table-column>

        <el-table-column :label="date.getFullYear().toString().substring(2) + '年' + (date.getMonth() < 9 ? ('0' + (date.getMonth() + 1)) : date.getMonth() + 1) + '月名次'" width="80" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.top !== null ? scope.row.top : '-' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#factory-ranking-table {
  width: 100%;
  height: 100%;
  overflow: auto;

  --el-bg-color: #333;
  --el-text-color-secondary: white;

  .el-table {
    --el-table-bg-color: rgba(0, 0, 0, 0.2);
    --el-table-border-color: rgba(100, 100, 100, 0.5);
    --el-table-row-hover-bg-color: rgba(100, 100, 100, 0.5);
    --el-table-tr-bg-color: rgba(0, 0, 0, 0.2);
    --el-table-text-color: white;
  }

  &:deep(.el-table__empty-block) {
    background-color: rgba(0, 0, 0, 0.2);
  }
  
  .ranking-table-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 2%;
    color: white;
    font-weight: normal;

    --el-color-primary: green;

    &:deep(.el-input__wrapper) {
      background-color: black;
    }

    &:deep(.el-range__icon), &:deep(.el-range-input), &:deep(.el-select__input), &:deep(.el-input__inner) {
      color: #ccc;
    } 

    &:deep(.el-date-range-picker) {
      --el-color-primary: green;
      --el-datepicker-text-color: white;
      --el-datepicker-off-text-color: #999;
      --el-datepicker-header-text-color: white;
      --el-datepicker-icon-color: white;
      --el-datepicker-border-color: white;
      --el-datepicker-inner-border-color: white;
      --el-datepicker-inrange-bg-color: #666;
      --el-datepicker-inrange-hover-bg-color: #666;
      --el-datepicker-active-color: green;
      --el-datepicker-hover-text-color: green;
    }

    &:deep(.el-date-picker__header-label) {
      color: white;
    }

    &:deep(.el-icon), &:deep(.cell) {
      color: white;

      &:hover {
        color: green;
      }
    }

    &:deep(.current .cell) {
      color: green;
    }

    &:deep(.el-picker-panel) {
      color: white;
      background: black;
    }

    &:deep(.el-select__popper.el-popper) {
      background-color: black;
    }

    &:deep(.el-select-dropdown__item) {
      color: white;
      background-color: black;
    }

    &:deep(.el-select-dropdown__item.selected) {
      color: white;
      background-color: green;
    }

    &:deep(.el-select-dropdown__item.hover) {
      color: white;
      background-color: #666;
    }

    &:deep(.el-popper) {
      background-color: black;
    }

    .ranking-table-top-item {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .ranking-table-bottom {
    padding: 0 2%;
  }
}
</style>